<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dom操作2</title>
</head>

<body>
    <div id="div1" style="background-color: aqua;">

    </div>

    <div id="div2" style="background-color: aquamarine;">

    </div>

    <div id="div3" style="background-color:bisque">
        <h2>插入位置上方</h2>
        <p id="p1"> </p>
        <h2>插入位置下方</h2>
    </div>

    <div id="div3" style="background-color:chocolate">
        <p id="p2">参考位置</p>
    </div>

    <div id="div4" style="background-color:burlywood">
        <h3>删除操作DIV</h3>
        <p id="span1">删除操作p1</p>
        <ul>
            <li>香蕉</li>
            <li>苹果</li>
            <li>橘子</li>
        </ul>
        <ul>
            <li>香蕉皮</li>
            <li id="li2">苹果皮</li>
            <li>橘子皮</li>
        </ul>
    </div>

    <script>
        let myDiv1 = document.getElementById("div1")
        console.log(div1)
        div1.innerHTML = "<p>插入内容</p>"

        let myEle = document.createElement("h1")
        myEle.innerHTML = "新创建内容"
            // div1.appendChild(div)
        div1.append(myEle)

        //append:可以插入多个元素，而且可以直接插入文本（但是不支持标签渲染）
        let myEle1 = document.createElement("p")
        myEle1.innerHTML = "新建内容2"
        div2.append(myEle, myEle1)
        div2.append("新建内容3")

        //插入元素：insertBefore
        let p1 = document.getElementById("p1")
        let myEle2 = document.createElement("h3")
        myEle2.innerHTML = "这是h3样式标题"
        let myDiv2 = document.querySelectorAll("div")
        console.log(myDiv2)
            //第一个参数是插入节点，第二个参数是参考位置
        myDiv2[2].insertBefore(myEle2, p1)

        //插入元素：before
        let p2 = document.getElementById("p2")
        let myEle3 = document.createElement("h4")
        myEle3.innerHTML = "这是h4样式标题"
        p2.before(myEle3)

        //插入元素：after
        let myEle4 = document.createElement("h5")
        myEle4.innerHTML = "这是h5样式标题"
        p2.after(myEle4)

        //删除元素：remove
        let mySpan1 = document.getElementById("span1")
        span1.remove()

        console.log("\n")

        //获取元素方法：
        let myList = document.getElementsByTagName("ul")
        console.log("子级元素获取：")
        console.log("myList[0].children 打印结果:")
        console.log(myList[0].children) //全部子元素
        console.log("myList[0].firstElementChild 打印结果:")
        console.log(myList[0].firstElementChild) //第一个子元素
        console.log("myList[0].firstChild.nextSibling 打印结果::")
        console.log(myList[0].firstElementChild.nextSibling)
        console.log("myList[0].firstChild.nextSibling.nextSibling 打印结果::")
        console.log(myList[0].firstElementChild.nextSibling.nextSibling)
        console.log("myList[0].firstChild.nextElementSibling 打印结果::")
        console.log(myList[0].firstElementChild.nextElementSibling)

        console.log("myList[0].children[2] 打印结果：")
        console.log(myList[0].children[2])

        console.log("\n")

        let mySpan2 = document.getElementById("li2")
        let myList2 = mySpan2.parentElement
        console.log("父级元素获取：")
        console.log("mySpan2.parentElement 打印结果\n", myList2)

        //删除元素2：
        myList2.removeChild(myList2.children[1])
    </script>
</body>

</html>